<template>
  
  <div>
    <!-- 使用 router-link 组件创建导航链接 -->
    <router-link to="/friend?words=朋友">Friend</router-link>
    <router-link to="/find?words=发现">Find</router-link>
    <router-link to="/my?words=我的">My</router-link>
    <!-- 使用 router-view 组件显示当前路由的组件 --> 
  </div>
  <router-view></router-view>
  
  
</template>

<script>
import { useRouter } from 'vue-router';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Vue4',
  data() {
    return {
      name: 'John'
    };
  },
  setup() {
    const router = useRouter();
    // 在组件挂载时跳转到第一个导航链接对应的路由
    router.push('/friend');
  },
  methods: {
    changeName() {
      this.name = 'Tom';
    },
    goMy(){
      this.$router.push('/my');  
    }
  }
};
</script>

<style scoped>
.active {
  color: red;
}
</style>